<template>
  <div class="code-group">
    <div
      class="rounded-t-md border-b-2 border-gray-700 px-2 bg-gray-800 text-sm text-white relative"
    >
      <button
        v-for="({ label }, i) in tabs"
        ref="tabs"
        :key="label"
        class="px-4 py-3 text-gray-400 font-bold font-mono"
        @click="updateTabs(i)"
      >
        {{ label }}
      </button>
      <span ref="highlight-underline" class="highlight-underline" />
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'CodeGroup',
  data() {
    return {
      tabs: [],
      activeTabIndex: 0,
    }
  },
  watch: {
    activeTabIndex(newValue, oldValue) {
      this.tabs[oldValue].elm.classList.remove('active')
      this.tabs[newValue].elm.classList.add('active')
    },
  },
  mounted() {
    // 这个slot写法可以
    this.tabs = this.$slots.default
      .filter((slot) => Boolean(slot.componentOptions))
      .map((slot) => {
        return {
          label: slot.componentOptions.propsData.label,
          elm: slot.elm,
        }
      })
    this.tabs[0].elm.classList.add('active')
    this.$nextTick(this.updateHighlighteUnderlinePosition)
  },
  methods: {
    updateTabs(i) {
      if (i === this.activeTabIndex) {
        console.warn('不要重复点击')
        return
      }
      this.activeTabIndex = i
      this.updateHighlighteUnderlinePosition()
    },
    updateHighlighteUnderlinePosition() {
      // console.log('updating highlight underline position...')
      const activeTab = this.$refs.tabs[this.activeTabIndex]
      if (!activeTab) {
        return
      }
      const highlightUnderline = this.$refs['highlight-underline']
      highlightUnderline.style.left = `${activeTab.offsetLeft}px`
      highlightUnderline.style.width = `${activeTab.clientWidth}px`
      // console.log('updated highlight underline position')
    },
  },
}
</script>

<style scoped lang="less">
button {
  outline: none;
}

.highlight-underline {
  @apply bg-primary-500 absolute;
  bottom: -2px;
  height: 2px;
  transition: left 150ms, width 150ms;
}

.code-group ::v-deep {
  & pre[class*='language-'] {
    @apply rounded-t-none mt-0;
  }
}
</style>
